<template>
  <!-- vue3页面 -->

  <div style="padding: 5px;width: 100%; height: 100%;">
    <a-card style="border-radius: 10px; height: 100%; overflow-y: auto" :bodyStyle="{ padding: '5px 15px' }">
      <a-tabs v-model:activeKey="activeKey" :tabBarStyle="{ margin: '0' }">
        <a-tab-pane key="1" tab="工会经费管理">
          <a-descriptions
            bordered
            :column="2"
            style="margin-top: 20px"
            :labelStyle="{ width: '200px', textAlign: 'center' }"
            :contentStyle="{ textAlign: 'center' }"
          >
            <a-descriptions-item label="工会名称" :span="2"
              ><span style="font-weight: bold; font-size: 16px; color: #000000d9">工会委员会</span></a-descriptions-item
            >
            <a-descriptions-item label="工会预算" :span="1">
              <a-tag color="orange">15万</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="工会已使用预算" :span="1"> <a-tag color="green">10万</a-tag></a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="2" tab="分工会经费管理" force-render>
          <MyUnionExpenditure />
        </a-tab-pane>
        <a-tab-pane key="3" tab="协会经费管理">
          <MyAssociationExpenditure />
        </a-tab-pane>
        <a-tab-pane key="4" tab="专项经费使用记录">
          <MyAppropriation />
        </a-tab-pane>
        <a-tab-pane key="5" tab="通用经费额度跨年作废">敬请期待</a-tab-pane>
      </a-tabs>
    </a-card>
    <MyCurrentUnion />
    <MyCurrentAssociation />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import MyUnionExpenditure from './components/remainder/unionExpenditure.vue';
  import MyAssociationExpenditure from './components/remainder/associationExpenditure.vue';
  import MyAppropriation from './components/remainder/appropriation.vue';
  import MyCurrentUnion from './components/remainder/currentUnion.vue';
  import MyCurrentAssociation from './components/remainder/currentAssociation.vue';

  onMounted(() => {
    console.log('mounted');

    // 写一个fetch请求
  });
  const activeKey = ref('1');
</script>

<style scoped></style>
